<template>
  <el-dialog
    top="5vh"
    width="75%"
    height="75%"
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-steps
      align-center
      class="step"
      :active="step.active"
      finish-status="success"
    >
      <el-step
        :title="item"
        v-for="(item, index) in step.list"
        :key="index"
      ></el-step>
    </el-steps>

    <!-- 基本信息 -->
    <BaseForm
      ref="baseForm"
      v-show="step.active == 0"
      :categoryName="categoryName"
      :spuInfo="spuInfo"
    ></BaseForm>

    <!-- 图片信息 -->
    <ImageForm
      ref="imageForm"
      v-show="step.active == 1"
      :spuInfo="spuInfo"
    ></ImageForm>

    <!-- 描述信息 -->
    <DescForm
      ref="descForm"
      v-show="step.active == 2"
      :spuInfo="spuInfo"
    ></DescForm>

    <!-- 规格参数 -->
    <AttrForm
      ref="attrForm"
      v-show="step.active == 3"
      :spuInfo="spuInfo"
    ></AttrForm>

    <!-- 销售属性 -->
    <SaleAttrForm
      ref="saleAttrForm"
      v-show="step.active == 4"
      :spuInfo="spuInfo"
    ></SaleAttrForm>

    <!-- sku 数据 -->
    <SkuForm
      ref="skuForm"
      v-show="step.active == 5"
      :spuInfo="spuInfo"
    ></SkuForm>

    <!-- 预览窗口 -->
    <PreviewBox ref="previewBox" v-show="step.active == 6"></PreviewBox>

    <div slot="footer" class="dialog-footer">
      <el-button @click="prevStep" v-if="step.active != 0">{{
        step.button.prev
      }}</el-button>
      <el-button type="primary" @click="nextStep" :loading="loading">{{
        step.button.next
      }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import updateMixins from "@/views/base/updateMixins";

import BaseForm from "@/views/product/spu/baseForm";
import ImageForm from "@/views/product/spu/imageForm";
import DescForm from "@/views/product/spu/descForm";
import AttrForm from "@/views/product/spu/attrForm";
import SaleAttrForm from "@/views/product/spu/saleAttrForm";
import SkuForm from "@/views/product/spu/skuForm";
import PreviewBox from "@/views/product/spu/previewBox";

// 请求接口 start
import productApi from "@/api/productApi";
import serviceUtils from "@/utils/serviceUtils";
// 请求接口 end

export default {
  // 组件名称 start
  name: "productSpuUpdate",
  mixins: [updateMixins],
  // 组件名称 end
  props: ["dialogTitle"],
  components: {
    BaseForm,
    ImageForm,
    DescForm,
    AttrForm,
    SaleAttrForm,
    SkuForm,
    PreviewBox,
  },
  data() {
    return {
      // 保存按钮状态
      saveButtonFlag: false,

      // 当前步骤
      step: {
        active: 0,
        list: [
          "基本信息",
          "商品图片",
          "商品描述",
          "规格参数",
          "销售属性",
          "商品SKU",
          "总览",
        ],
        form: [
          "baseForm",
          "imageForm",
          "descForm",
          "attrForm",
          "saleAttrForm",
          "skuForm",
          "previewBox",
        ],
        button: {
          prev: "上一步",
          next: "下一步",
        },
      },
      // 分类信息
      categoryId: null,
      categoryName: "",
      // 商品信息
      spuInfo: {},
    };
  },
  methods: {
    // 分类下的规格参数和销售属性
    remoteOtherData() {
      this.categoryId = this.meta.categoryId;
      this.categoryName = this.meta.categoryName;

      const loading = serviceUtils.loading(".el-dialog");
      productApi.group
        .listWithCascade(this.categoryId)
        .then((groupAttrsRes) => {
          productApi.saleAttr
            .listWithParent(this.categoryId)
            .then((saleAttrsRes) => {
              loading.close();
              this.spuInfo.groupAttrs = groupAttrsRes.data;
              this.spuInfo.saleAttrs = saleAttrsRes.data;
              this.$nextTick(() => {
                this.step.form.forEach((item) => {
                  this.$refs[item].initData();
                });
              });
            })
            .catch((error) => {
              loading.close();
            });
        })
        .catch((error) => {
          loading.close();
        });
    },
    // 商品详情
    remoteData(row) {
      const loading = serviceUtils.loading(".el-dialog");
      productApi.spu
        .info(row.id)
        .then((res) => {
          loading.close();
          this.spuInfo = res.data;
          this.categoryId = res.data.info.categoryId;
          this.categoryName = res.data.info.categoryBreadcrumbName;
          this.$nextTick(() => {
            this.step.form.forEach((item) => {
              this.$refs[item].initData();
            });
          });
        })
        .catch((error) => {
          loading.close();
        });
    },
    // 下一步事件
    nextStep() {
      if (
        this.$refs[this.step.form[this.step.active]].validate() &&
        this.step.active < this.step.list.length - 1
      ) {
        if (this.step.active === 5) {
          this.$refs["previewBox"].initData(this.getPreviewData());
        }
        this.step.active++;
      }

      // 发送请求
      if (this.saveButtonFlag) {
        this.saveOrUpdate();
      }

      // 最后一步，将下一步变成保存按钮
      if (this.step.active == this.step.list.length - 1) {
        this.step.button.next = "保存商品";
        this.saveButtonFlag = true;
      }
    },
    // 上一步事件
    prevStep() {
      if (this.step.active > 0) {
        this.saveButtonFlag = false;
        this.step.active--;
        this.step.button.next = "下一步";
      }
    },
    // 清空数据
    clearData() {
      this.spuInfo = {};

      this.step.active = 0;
      this.step.button = {
        prev: "上一步",
        next: "下一步",
      };
      this.saveButtonFlag = false;

      // 清空所有表单校验数据，并恢复到原始数据状态
      this.$nextTick(() => {
        this.step.form.forEach((item) => {
          this.$refs[item].clearValidate();
          this.$refs[item].clearData();
        });
      });
    },
    // 销售属性选中发生变化
    attrCheckGroupChange() {
      this.$refs["skuForm"].refreshData(this.$refs["saleAttrForm"].getData(), this.$refs["imageForm"].getData());
    },
    // 获取预览数据
    getPreviewData() {
      return {
        baseForm: this.$refs["baseForm"].getPreviewData(),
        imageForm: this.$refs["imageForm"].getPreviewData(),
        descForm: this.$refs["descForm"].getPreviewData(),
        attrForm: this.$refs["attrForm"].getPreviewData(),
        skuForm: this.$refs["skuForm"].getPreviewData(),
      };
    },
    spuImagesRemove(data) {
      this.$refs["skuForm"].spuImagesRemove(data);
    },
    spuImagesAdd(data, postion) {
      this.$refs["skuForm"].spuImagesAdd(data, postion);
    },
    // 新增或编辑
    saveOrUpdate() {
      var params = { ...this.meta };

      // 规格参数
      var saleAttrFormData = this.$refs["saleAttrForm"].getData();

      // 基本信息
      params.info = this.$refs["baseForm"].getData();
      params.info.categoryId = this.categoryId;

      // 图片信息
      params.images = this.$refs["imageForm"].getData();

      // 商品描述
      params.descs = this.$refs["descForm"].getData();

      // 规格参数
      params.baseAttrs = this.$refs["attrForm"].getData();

      // 销售参数
      params.saleAttrs = this.$refs["saleAttrForm"].getData().saleAttrs;

      // sku
      params.skuInfos = this.$refs["skuForm"].getData();

      // console.log(params)
      // return
      // 保存请求
      this.showLoading(true);
      if (params.info.id) {
        params.id = params.info.id;
        productApi.spu
          .update(params)
          .then((res) => {
            this.showDialog(false);
            this.$parent.querySearchForm();
          })
          .catch((error) => {
            this.showLoading(false);
          });
      } else {
        productApi.spu
          .save(params)
          .then((res) => {
            this.showDialog(false);
            this.$parent.querySearchForm();
          })
          .catch((error) => {
            this.showLoading(false);
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.step {
  margin-bottom: 40px;
}
.el-dialog__wrapper {
  /deep/.el-dialog {
    .el-dialog__body {
      padding: 30px 50px;
      height: 70vh;
    }
    .el-dialog__footer {
      padding: 10px 40px 30px 20px;
    }
  }
}
</style>